<template>
  <div class="goods-hot">
    <!-- 标题 -->
    <h3>{{ title }}</h3>
    <div v-if="goodsHot" class="hot">
      <GoodsItem v-for="item in goodsHot" :key="item.id" :goods="item" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue'
import { findHotGoods } from '../../api/goods'
import GoodsItem from '../category/goods-item.vue'
const props = defineProps({
  type: {
    // 1代表24小时热销榜 2代表周热销榜 3代表总热销榜
    type: Number,
    default: 1
  },
  // 拿到该商品的Id
  goodsId: {
    type: String,
    default: undefined
  }
})
const title = computed(() => {
  if (props.type === 1) return '24小时热销榜'
  if (props.type === 2) return '周热销榜'
  if (props.type === 3) return '总热销榜'
})
// 发起获取热门数据的请求
const goodsHot = ref([])
findHotGoods({ id: props.goodsId, type: props.type }).then(data => {
  goodsHot.value = data.result
})
</script>
<style lang="less" scoped>
@import '../../assets/styles/common.less';
@import '../../assets/styles/variables.less';

.goods-hot {
  h3 {
    height: 70px;
    background: @helpColor;
    color: #fff;
    font-size: 18px;
    line-height: 70px;
    text-align: center;
    font-weight: normal;

  }

  .hot {
    :deep(.goods-item) {
      background: #fff;
      width: 100%;
      margin-bottom: 10px;

      img {
        width: 200px;
        height: 200px;
      }

      p {
        margin: 0 10px;
      }

      &:hover {
        transform: none;
        box-shadow: none;
      }
    }
  }
}
</style>